<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var h1ele = document.createElement('h1'); //仅仅是创建好了一个标签  
        // 并没有放到页面上  
        // 将这个元素插入到body中  
        // 找到body元素 
        var bodyele = document.body;
        bodyele.appendChild(h1ele); // 将h1元素放到body的末尾  
        // 创建一个文本节点 
        var text = document.createTextNode('春天来了种花没啥意思,咱们一起种草莓');
        h1ele.appendChild(text);

        h1ele.className = 'title';
        h1ele.style.color = 'orange';


        //上述 我们创建了一个元素节点 一个文本节点 


        // 接下来  我们 想创建一个新的元素节点  然后插入到指定元素的前面  

        // 父节点.insertBefore(新的节点,谁的前面)
        // 父节点    body
        // 谁的前面  h1ele
        var h2ele = document.createElement('h2');
        var content = document.createTextNode('我是二级标题')
        h2ele.appendChild(content);
        bodyele.insertBefore(h2ele,h1ele);
        //创建一个h2标签  插入到h1标签的前面 



        // insertBefore 和  appendChild 区别? 


        // 父节点.appendChild(新节点); 
        // 把新的节点 插入到父节点的末尾  

        // 父节点.insertBefore(新的节点,谁的前面)

        // 将一个新的节点 插入到指定节点的前面  


    </script>
</body>
</html>